CloudWatch Synthetics CanaryスクリプトにPrettierが効かないときの対処法
こんにちは。たかやまです。
コードフォーマットツールにPrettierを使っているかたは多いと思います。私もVS Code上でPrettierを日々使っています。
そんなある日、CloudWatch SyntheticsのCanaryスクリプトをコーディングしようとした際にPrettierが効かないことがありましたので、その対処法をご紹介します。
原因
Canaryスクリプトをコーディングした時のディレクトリ構成は以下の通りです。
. ├── bin │ └── cdk.ts ├── lib │ ├── nodejs │ │ └── node_modules │ │ └── index.js │ └── cdk-stack.ts ├── test │ └── cdk.test.ts ├── README.md ├── cdk.json ├── jest.config.js ├── package-lock.json ├── package.json └── tsconfig.jsonn
Canaryスクリプトはlib/nodejs/node_modules/index.js
に記述しています。
お察しの方もいると思いますが、Prettierはデフォルトだとnode_modules
配下のファイルを無視する仕様となっているためCanaryスクリプトが記載されているlib/nodejs/node_modules/index.js
に対してフォーマットが効かない状態となっていました。
By default prettier ignores files in version control systems directories (".git", ".svn" and ".hg") and node_modules (if --with-node-modules CLI option not specified)
そもそもnode_modules
配下で記述する理由としては、CanaryスクリプトをCloudWatch Syntheticsにアップロードする場合にnodejs/node_modules/
にスクリプトが含まれている必要があるためです。(ここではCDKを使ってnodejsディレクトリをzip化してアップロードすることを想定しています。)
Amazon S3 の場所を使用して Canary スクリプトをアップロードする場合、zip ファイルにはフォルダ構造 nodejs/node_modules/myCanaryFilename.js file にスクリプトが含まれている必要があります。
一時的にnode_modules
以外のディレクトリ名で作業することでフォーマットを効かせることもできますが、正直面倒です。
Prettierの設定を変更することでnode_modules
配下に対してもフォーマットが効かせることもできるので次の対処法でそちらをご紹介します。
対処法
以下のいずれかの方法でnode_modules
へのPrettierの適用を有効にすることができます。
- Settings.jsonで
"prettier.withNodeModules": true
を追加する - GUIモードで
With Node Modules
にチェックを入れる
Settings.json
ショートカットキーCommand + ,
(Windows: Ctrl + ,
)で設定画面が開くので、右上のアイコンを選択します。
開かれたsettings.json
に"prettier.withNodeModules": true
を追加すればOKです。
GUI
GUIも同様にCommand + ,
(Windows: Ctrl + ,
)で開く設定画面でWith Node Modules
を入力し、表示された項目にチェックを入れればOKです。
実態はSettings.jsonに"prettier.withNodeModules": true
を追加することと同じです。
既存のnode_modulesへの影響
基本的に対象ファイルを編集しない限りVS CodeのPrettierがフォーマットをかけることはないので大丈夫です。ただそれでも心配という方は、.prettierignore
を作成してnode_modules
を除外するように設定してもらえればと思います。
以下の設定はCanaryスクリプトのあるlib/nodejs/node_modules
のみをフォーマット対象にする設定です。
**/node_modules !/lib/nodejs/node_modules
最後に
Prettierのデフォルト設定を知らずにハマっていたので、同じようにハマっている方へこちらの記事が助けになれば幸いです。
以上、たかやま(@nyan_kotaroo)でした。